<template>
    <div class="top-info-wrap">
        <div class="info  clear-block" :class="$route.path.includes('/my') ? '' : 'm-info-rank'">
            <div class="cvr" :class="$route.path.includes('/my') ? 'cover-dj' : 'cover-rank'">
                <img :src="imgUrl" :alt="name">
                <span class="mask"></span>
            </div>
            <div class="cnt">
                <div class="cntc" :class="$route.path.includes('/my') ? '' : 'override-cntc'">
                    <div class="title">
                        <i class="type u-icn u-icn-red-label f-pr" v-if="$route.path.includes('/my')">
                            <span class="f-pa f-r-white-icon"
                                style="display: inline-block; width: 8px;height: 8px; top: 2px; background-size: cover; left: 34px;">
                            </span>
                        </i>
                        <h2 class="f-ff2">{{ name }}</h2>

                    </div>

                    <div class="user">
                        <template v-if="$route.path.includes('/my')">
                            <a href="user/home?id=" class="face">
                                <img src="/src/assets/comment_img/user.jpg">
                            </a>

                            <span class="name f-thide">
                                <a href="/user/home?id=" class="s-fc7" :title="userName">{{ userName }}</a>
                            </span>
                            <span class="time s-fc4">{{ time }}</span>
                        </template>

                        <template v-else>
                            <i class="u-icn u-icn-clock"></i>
                            <span class="sep s-fc3">最近更新：{{ date }}</span>
                            <span class="s-fc4">（{{ time }}）</span>
                        </template>
                    </div>
                    <div class="btns">
                        <a href="javascript:;" class="u-btni u-btni-addply" title="播放" hidefocus="true">
                            <i>
                                <em class="ply"></em>
                                播放
                            </i>
                        </a>
                        <a href="javascript:;" class="u-btni u-btni-add" title="添加到播放列表"></a>
                        <a href="javascript:;" class="u-btni u-btni-fav u-btni-fav-dis">
                            <i>({{ addPlayNum }})</i>
                        </a>
                        <a href="javascript:;" class="u-btni u-btni-share">
                            <i>({{ shareNum }})</i>
                        </a>
                        <a href="javascript:;" class="u-btni u-btni-dl">
                            <i>下载</i>
                        </a>
                        <a href="javascript:;" class="u-btni u-btni-cmmt">
                            <i>(<span class="comment-count">{{ commentNum }}</span>)</i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { useRoute } from 'vue-router';

defineProps({
    imgUrl: String,
    userName: String,
    name: String,
    time: String,
    date: String,
    addPlayNum: Number,
    shareNum: Number,
    commentNum: Number
})

const $route = useRoute();
</script>
<style lang="scss" scoped>
.top-info-wrap {
    padding: 40px;

    .info {
        .cvr {
            float: left;
            position: relative;
            display: inline;
            padding: 3px;
            border: solid 1px #ccc;

            &.cover-rank {
                width: 150px;
                height: 150px;
            }

            &.cover-dj {
                width: 200px;
                height: 200px;
                padding: 4px;
                border: none;
                .mask{
                    width: 208px;
                    height: 208px;
                    background-position: 0 -1285px;
                    top: 0;
                    left: 0;
                }   
            }

            img {
                width: 100%;
                height: 100%;
                display: block;
            }

            .mask {
                position: absolute;
                width: 100%;
                height: 100%;
                background-position: -230px -380px;
                top: 3px;
                left: 3px;
            }


        }

        .cnt {
            float: right;
            width: 63%;
            height: 157px;

            .cntc {

                .title {
                    margin: 0 0 12px;
                    position: relative;
                    line-height: 24px;

                    h2 {
                        line-height: 24px;
                        font-size: 20px;
                        font-weight: normal;
                    }

                    .type {
                        position: relative;
                        top: 3px;
                        float: left;
                        margin-right: 6px;
                    }
                }

                .u-icn {
                    display: inline-block;
                    overflow: hidden;
                    vertical-align: middle;

                }

                .user {
                    margin: 0 0 20px;
                    line-height: 35px;

                    .face {
                        margin-right: 10px;
                        float: left;
                        width: 35px;
                        height: 35px;

                        img {
                            float: left;
                            height: 32px;
                            height: 32px;
                        }
                    }

                    .name {
                        max-width: 210px;
                        float: left;
                    }

                    .u-icn {
                        float: left;
                        margin: 9px 0 0 3px;
                    }

                    .time {
                        margin-left: 15px;
                    }

                    .u-icn-clock {
                        width: 13px;
                        height: 13px;
                        background-position: -18px -682px;
                    }

                    .sep {
                        margin-left: 5px;
                    }
                }

                .btns {
                    margin-bottom: 25px;
                    margin-right: -10px;

                    .u-btni {
                        margin-right: 6px;
                        font-family: simsun, \5b8b\4f53;
                        color: #333;
                        text-decoration: none;
                        padding: 0 5px 0 0;
                        white-space: nowrap;
                        float: left;
                        height: 31px;
                        line-height: 30px;
                        min-width: 23px;
                        cursor: pointer;

                        i {
                            float: left;
                            height: 31px;
                            line-height: 30px;
                            min-width: 23px;
                            cursor: pointer;
                        }
                    }

                    .u-btni-addply {
                        float: left;
                        color: #fff;
                        background-position: right -428px;
                        padding: 0 5px 0 0;
                        white-space: nowrap;
                        display: inline-block;
                        height: 31px;
                        line-height: 31px;
                        overflow: hidden;
                        vertical-align: top;
                        text-align: center;
                        margin-right: 0;
                        cursor: pointer;

                        &:hover {
                            background-position: right -510px;

                            i {
                                background-position: 0 -469px;

                                .ply {
                                    background-position: -28px -1622px;
                                }
                            }
                        }

                        &:active {
                            background-position: right -592px;

                            i {
                                background-position: 0 -551px;

                                .ply {
                                    background-position: -56px -1622px;
                                }
                            }


                        }

                        i {
                            color: #fff;
                            background-position: 0 -387px;
                            padding: 0 7px 0 8px;
                            pointer-events: none;
                            display: inline-block;
                            height: 31px;
                            line-height: 31px;
                            overflow: hidden;
                            vertical-align: top;
                            text-align: center;
                            cursor: pointer;

                            .ply {
                                float: left;
                                width: 20px;
                                height: 18px;
                                margin: 6px 2px 2px 0;
                                background-position: 0 -1622px;
                                overflow: hidden;


                            }
                        }


                    }

                    .u-btni-add {
                        width: 31px;
                        margin-left: -3px;
                        padding-right: 0;
                        background-position: 0 -1588px;

                        &:hover {
                            background-position: -40px -1588px;
                        }

                        &:active {
                            background-position: -80px -1588px;
                        }
                    }

                    .u-btni-fav {
                        background-position: right -1020px;

                        &:hover {
                            background-position: right -1106px;

                            i {
                                background-position: 0 -1063px;
                            }
                        }

                        i {
                            background-position: 0 -977px;
                            padding-right: 2px;
                            padding-left: 28px;
                        }
                    }

                    .u-btni-fav-dis {
                        cursor: default;
                        background-position: right -1192px;

                        &:hover {
                            background-position: right -1192px;

                            i {
                                background-position: 0 -1149px;
                            }
                        }

                        i {
                            color: #bebebe;
                            background-position: 0 -1149px;
                            cursor: default;
                        }
                    }

                    .u-btni-share {
                        background-position: right -1020px;

                        &:hover {
                            background-position: right -1106px;

                            i {
                                background-position: 0 -1268px;
                            }
                        }

                        i {
                            padding-right: 2px;
                            padding-left: 28px;
                            background-position: 0 -1225px;


                        }

                    }

                    .u-btni-dl {
                        background-position: right -1020px;

                        &:hover {
                            background-position: right -1106px;

                            i {
                                background-position: 0 -2805px;
                            }
                        }

                        i {
                            background-position: 0 -2761px;
                            padding-right: 2px;
                            padding-left: 28px;

                        }
                    }

                    .u-btni-cmmt {
                        background-position: right -1020px;

                        &:hover {
                            background-position: right -1106px;

                            i {
                                background-position: 0 -1508px;
                            }
                        }

                        i {
                            background-position: 0 -1465px;
                            padding-right: 2px;
                            padding-left: 28px;


                            .comment-count {
                                cursor: pointer;
                            }
                        }
                    }

                }
            }
        }




    }

    .m-info-rank {
        .cnt {
            .cntc {
                margin-left: 187px;
                .title{
                    margin: 16px 0 4px;
                }

            }

            .override-cntc{
                margin-left: -30px;
            }
        }
    }
}
</style>